import {defineComponent, ref,h,} from "vue";
import {NMenu,NIcon,} from "naive-ui"
import {storeToRefs} from "pinia"
import {useMneu} from "../../store/moduls/menu"
import {MenuOption} from "naive-ui"
import {useRouter} from "vue-router"
import { ChevronDownOutline } from '@vicons/ionicons5'
import { Book, BookOpen } from '@vicons/fa'
export default defineComponent({
    name: "leftnav",
    props: {
        collapsed:{
            type:Boolean,
            default:false,
        },
    },
    setup(props) {
        const router = useRouter()
        const store = useMneu()
        const {menulist:menuOptions,} = storeToRefs(store)
        const handleClick = (key:string,item:MenuOption )=>{
            router.push({"name":key})
        }
        // 渲染完整文字
        const renderMenuLabel=(option: any)=>{
            return h('span', null, {
                default: () => {
                  return option.label
                },
              })
        }
        const renderMenuIcon=(option: any)=>{
            return h(NIcon, null, { default: () => h(props.collapsed ? Book : BookOpen) })
        }
        const expandIcon=(option: any)=>{
            return h(NIcon, null, { default: () => h(ChevronDownOutline) })
        }
        return () => (
            <div class="w-full h-full overflow-x-hidden overflow-y-auto bg-niluolan">
                <NMenu
                    class={"w-full"}
                    accordion={true}
                    collapsed={props.collapsed}
                    collapsed-width={64}
                    collapsed-icon-size={22}
                    indent={12}
                    options={menuOptions.value}
                    onUpdate:value={handleClick }
                    render-label={renderMenuLabel}
                    render-icon={renderMenuIcon}
                    expand-icon={expandIcon}
                />
            </div>
        )
    }
})
